<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>websocket ping</title>
  </head>
  <body>
    <script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
    <script>
      let socket = null;
      let wsHost = `${window.location.host}`;

      if (!!~wsHost.indexOf("localhost")) {
        wsHost = `http://${wsHost}/ws`;
      } else {
        wsHost = `https://${wsHost}/ws`;
      }
      socket = io(wsHost);
      socket.on("connect", function() {
        console.log("connected!");
      });

      socket.on("disconnect", function() {
        console.log("disconnect...");
      });

      socket.on("messagePong", function(res) {
        console.log(res);
        document.getElementById("show").innerHTML = res;
      });

      function ping() {
        socket.emit("ping");
      }
    </script>
    <h1>Ping</h1>
    <div id="show" style="width: 300px;"></div>
    <button id="ping">ping</button>
    <script>
      let button = document.getElementById("ping");
      button.addEventListener("click", function() {
        console.log("send ping");
        socket.emit("messagePing", "");
      });
    </script>
  </body>
</html>
